<template>
  <div>
    <!-- 登录框 -->
    <div class="contain">
      <div class="model">
        <div class="top-contain">
          <h1 class="title">{{ title }}</h1>
          <span class="bindPhone">{{ chooseLoginType }}</span>
        </div>
        <el-form label-width="80px" label-position="top">
          <el-form-item label="选择登录方式">
            <el-select v-model="showType" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template v-if="showType == 'bindPhone'">
          <BindPhone></BindPhone>
        </template>
        <template v-if="showType == 'weChatLogin'">
          <WeChatLogin></WeChatLogin>
        </template>
        <template v-if="showType == 'phoneLogin'">
          <PhoneLogin></PhoneLogin>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import BindPhone from "./bindPhone.vue";
import WeChatLogin from "./weChat-login.vue";
import PhoneLogin from "./phoneLogin.vue";
export default {
  components: { WeChatLogin, BindPhone, PhoneLogin },
  data() {
    return {
      options: [
        { value: "bindPhone", label: "手机号登录" },
        { value: "weChatLogin", label: "微信登录" },
        { value: "phoneLogin", label: "账号登录" }
      ],
      value: "",
      title: this.$store.state.programName,
      showType: "bindPhone"
    };
  },
  computed: {
    chooseLoginType() {
      let type = "";
      this.options.forEach(item => {
        if (item.value == this.showType) {
          type = item.label;
        }
      });
      return type;
    }
  },
  methods: {},
  mounted() {}
};
</script>

<style lang="scss" scoped>
.contain {
  background-color: #fff;
  border-radius: 14px;
  // box-shadow: 0 0 5px #333;
  width: 518px;
  overflow: hidden;
  .model {
    padding: 92px 48px 80px 71px;
    .top-contain {
      margin-bottom: 71px;
      .title {
        font-size: 32px;
        color: $font-color;
        font-weight: 600;
        margin-bottom: 7px;
      }
      .bindPhone {
        font-size: 16px;
        color: $nomal-color;
      }
    }
  }
}
</style>
